<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      账号添加
    </div>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="账号" prop="account">
        <el-input
          type="text"
          v-model="ruleForm.account"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item label="选择用户组" prop="account">
        <el-select
          v-model="ruleForm.userGroup"
          clearable
          placeholder="请选择用户组"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { addUserInfo } from '@/req/userAjax'
import { alterSuccess } from '@/util/msgTips'

import {
  validatePassword,
  validateAccount,
  validateuserGroup
} from '@/util/rule/fromRule'
export default {
  data () {
    return {
      ruleForm: {
        account: '',
        password: '',
        userGroup: ''
      },
      rules: {
        account: [{ validator: validateAccount, trigger: 'blur' }],
        password: [{ validator: validatePassword, trigger: 'blur' }],
        userGroup: [{ validator: validateuserGroup, trigger: 'change' }]
      },
      options: [
        {
          value: 'super',
          label: '超级管理员'
        },
        {
          value: 'admin',
          label: '普通管理员'
        },
        {
          value: 'emp',
          label: '员工'
        },
        {
          value: 'captain',
          label: '组长'
        },
        {
          value: 'noting',
          label: '工具人'
        }
      ]
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const { msg, code } = await addUserInfo(this.ruleForm)
          if (code === 0) {
            alterSuccess(msg)
            this.ruleForm.account = ''
            this.ruleForm.password = ''
            this.ruleForm.userGroup = ''
          }
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
  // computed:{
  //   handle:{
  //     get(){},
  //     set(){}
  //   }
  // }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 400px;
}
</style>
